<template>
   <div class="sui-navbar">
        <div class="navbar-inner filter">
            <ul class="sui-nav">
                <li v-for='item in btns' :key='item.id'
                :class='{active:activeSort.type===item.type}' @click='switchSort(item.type)'>
                    <a href="javascript:;">
                      <i>{{item.msg}}</i>
                      <i class="iconfont" :class="className"
                          style="color: white" v-show="activeSort.type===item.type"></i>
                    </a>
                    
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  components: {},
  props:['btns','activebtn'],
  data() {
    return {
    };
  },
  computed: {
    activeSort(){
      return {
        type:+this.activebtn.split(':')[0],
        upDown:+this.activebtn.split(':')[1]
      }
    },
    className(){
      return this.activebtn.upDown==='asc'?"icon-xiangshangjiantoucuxiao":"icon-xiangxiajiantoucuxiao"
    }
  },
  methods: {
    switchSort(type){
      let updown='desc';
      if(+type===this.activeSort.type){
        updown=this.className==="icon-xiangshangjiantoucuxiao" ? "desc" : "asc"
      }
      this.$emit('change',{type,updown})
    }
  },
  mounted() {}
};
</script>
<style scoped lang='less'>
.sui-navbar {
        overflow: visible;
        margin-bottom: 0;

        .filter {
            min-height: 40px;
            padding-right: 20px;
            background: #fbfbfb;
            border: 1px solid #e2e2e2;
            padding-left: 0;
            border-radius: 0;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

            .sui-nav {
                position: relative;
                left: 0;
                display: block;
                float: left;
                margin: 0 10px 0 0;

                li {
                    float: left;
                    line-height: 18px;

                    a {
                        display: block;
                        cursor: pointer;
                        padding: 11px 15px;
                        color: #777;
                        text-decoration: none;
                    }

                    &.active {
                        a {
                            background: #e1251b;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
</style>